/***  基本语法 ***/
// 使用npm install , 由webpack来管理外部依赖
// import关键字使得webpack能建立正确的依赖图，利用这张依赖图来生成优化的包文件(bundles),并且可使得程序按正确的顺序运行
// Modules模块，指使用import或export操作的对象或函数，而这些指令，普通浏览器是不支持的，只能被node下的webpack所支持，webpack做了转化代码的工作，转化后普通浏览器便支持了
/*重点注意：webpack不会更改任何import与export以外的任何代码！！！ 如果你需要转换你自己写的代码，请使用Babel等转换插件，通过webpack loader机制进行转化
*
* webpack不是必须要一个配置文件，但是配置可以省了很多命令，所以我们还是建一个webpack.config.js
*
* */

/** 常用node命令 **/
// npx webpack --mode development ：运行打包命令，指定为开发环境
// npx webpack --mode development --config webpack.config.js ：运行打包命令，指定为开发环境，指令配置文件
// 注意，如查配置文件名是webpack.config.js，命令行可以省略，这是一个默认配置文件名


/** 常用工具模块安装 **/
// npm install --save-dev style-loader css-loader  // 这些工具只在编译打包时用到，并不会传递到生产环境中去，所以只需要save-dev

/*两种动态引入的方式：import 与 require，它为优化打包提供了条件；import内置了promise,因此对旧的浏览器不支持，如要兼容，请使用 es6-promise or promise-polyfill工具转换*/


import _ from 'lodash'
import './css/style.css'
import Icon from './image/icon.png' //Icon变量将包含打包后的图片路径
import WebpackSvg from './image/webpack.svg' //Icon变量将包含打包后的图片路径
import Data from './data/data.xml'
import printMe from './print.js'
import another_module from './another-module'


function component() {
    const element = document.createElement('div');

    // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    // 除了引入style.css，还需要使用方法为DOM节点添加刚才所引入样式文件中的class。注意，包中并不会含style.css这个文件，而是直接把样式文件内容写到了渲染的虚拟文档的头部中去了
    // 在浏览器中运行时，查看DOM元素的头部就能发现.hello样式类。它是js在运行时临时渲染添加进去的。
    element.classList.add('hello');

    // 加载文件示例1
    const myIcon = new Image(); //创建一个Image图片节点对象
    myIcon.src = Icon; // 设置图片节点对象的路径为Icon
    element.appendChild(myIcon);
    // 加载文件示例2：
    const mySvg = new Image(); //创建一个Image图片节点对象
    mySvg.src = WebpackSvg; // 设置图片节点对象的路径为Icon
    mySvg.width = 100
    element.appendChild(mySvg);

    // 加一个按钮
    const btn = document.createElement('button');
    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;
    element.appendChild(btn);
    // 加一个按钮
    const btn2 = document.createElement('button');
    btn2.innerHTML = 'btn2-Click me and check the console!';
    btn2.onclick = another_module;
    element.appendChild(btn2);

    return element;
}

document.body.appendChild(component());

console.log('data.xml->',Data)
